<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>the-Projector</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" 
    	  href="../../css/theprojector.css" 
    	  th:href="@{/css/theprojector.css}"/>
  </head>

  <body>
    <div>
      <img src="../../images/theprojector.png" alt="theProjector logo" title="theProjector logo" 
           th:src="@{/images/theprojector.png}" th:alt-title="#{title.application}"/>
    </div>
    
    <div class="employeeList" th:unless="${#lists.isEmpty(allEmployees)}">    
      <h2 th:text="#{title.list}">List of Employees</h2>     
      <form action="#" th:action="@{/theprojector}" th:object="${employee}" method="post"> 
	      <table>      	
	          <tr th:each="sb:${allEmployees}">            
	            <td class="fullName" th:text="${sb.fullName}">${sb.fullName}</td>
	            <td>
	            	<button type="submit" name="removeEmployee" 
	            			th:value="${sb.employeeId}" 
	            			th:text="#{employeeForm.remove}">Remove Employee</button>
	            </td>            
	          </tr>         
	      </table>
      </form>      
    </div>
    
    <div th:if="${#lists.isEmpty(allEmployees)}">    
      <h2 th:text="#{message.noAssigned}">No Assigned Employees Yet</h2>
    </div>
    
	<div th:unless="${#lists.isEmpty(allUnassignedEmployees)}">    
      <h2 th:text="#{title.new}">Add new employee to the project</h2>
      <form action="#" th:action="@{/theprojector}" 
      		th:object="${employee}" method="post">
    	<select th:field="*{employeeId}">
    		<option th:each="sopt:${allUnassignedEmployees}" 
           			th:value="${sopt.employeeId}" 
           			th:text="${sopt.fullName}">Employee</option>
    	</select>
    	<button type="submit" name="addEmployee" th:text="#{employeeForm.add}">Add Employee</button>
      </form>
    </div>
    
    <div th:if="${#lists.isEmpty(allUnassignedEmployees)}">    
      <h2 th:text="#{message.noMoreUnassigned}">No More Unassigned Employees</h2>
    </div>
    
  </body>
</html>